<template>
	<div>
		<el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
		<div class="container">
			 
				 <el-row>
					 <el-form-item  label="入库来源：">
						<el-radio-group v-model="ruleForm.source" @change="handletab">
							<el-radio label="采购入库">采购入库</el-radio>
							<el-radio label="加工入库">加工入库</el-radio>
						  </el-radio-group>
					</el-form-item>
				 </el-row>
				<el-row :span = "24">
					<el-col :span="10">
						<el-form-item  label="供应商名称：" v-if="processhidden">
						    <el-select v-model="ruleForm.supplierName"  value-key="id" filterable placeholder="请选择" style="width: 300px;" >
						        <el-option
						            v-for="item in supplierlist"
						            :key="item.id"
						            :label="item.supplierName"
						            :value="item.supplierName"
						        >
						        {{item.supplierName}}
						        </el-option>
						    </el-select>
						</el-form-item>
						<el-form-item label="入库时间：">
						    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.inTime"  style="width: 300px;"></el-date-picker>
						</el-form-item>
						<el-form-item  label="仓位：">
						    <el-select v-model="warehouseName" @change="changeWare" value-key="id" filterable placeholder="请选择" style="width: 300px;">
						        <el-option
						            v-for="item in warehouseList"
						            :key="item.id"
						            :label="item.name"
						            :value="item"
						        >
						        {{item.name}}
						        </el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入库批号：">
						    <el-input v-model="ruleForm.storageBatch"  style="width: 300px"></el-input>
						</el-form-item>
						<el-form-item  label="采购员：">
						    <el-select v-model="ruleForm.buyer"  value-key="id" filterable placeholder="请选择" style="width: 300px;">
						        <el-option
						            v-for="item in userlist"
						            :key="item.id"
						            :label="item.name"
						            :value="item.name"
						        >
						        {{item.name}}
						        </el-option>
						    </el-select>
						</el-form-item>
						<el-form-item  label="入库类型：" v-if="processhidden">
						    <el-select v-model="ruleForm.inType"  value-key="id" filterable placeholder="请选择" style="width: 300px;" >
						        <el-option
						            v-for="item in typelist"
						            :key="item.id"
						            :label="item.name"
						            :value="item.name"
						        >
						        {{item.name}}
						        </el-option>
						    </el-select>
						</el-form-item>
					</el-col>
				</el-row>
			
		</div>
		<div class="container" style="margin-top:20px;">
			<el-row style="margin-top:20px;">
				<el-table
					v-if="this.ruleForm.source == '加工入库'"
					:data="tableData"
					border
					style="margin-top:20px;"
					ref="multipleTable"
					header-cell-class-name="table-header"
				>
					<el-table-column prop="productName"  label="品名">
						<template slot-scope="scope">
							<el-input v-model="scope.row.productName" style="200px" @click.native="addproduct(scope.$index, scope.row)" ></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="specs"  label="规格">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.specs" disabled="disabled">
							    <template slot="append">
									{{scope.row.unit}}
									<!-- <el-select v-model="scope.row.unit"  value-key="id" @change="getunits(scope.$index, scope.row)" filterable placeholder="请选择" style="width:100px;">
									    <el-option
									        v-for="item in unitslist"
									        :key="item.id"
									        :label="item.name"
									        :value="item.name"
									    >
									    {{item.name}}
									    </el-option>
									</el-select> -->
								</template>
							  </el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="number"  label="数量">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.number"  @change="addup(scope.$index, scope.row)">
							    <template slot="append">
									{{scope.row.numunits}}
								</template>
							  </el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="subtotal"  label="小计">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容" disabled="disabled"  v-model="scope.row.subtotal" >
							    <template slot="append">
									{{scope.row.numunits1}}
								</template>
							  </el-input>
							</div>
						</template>
					</el-table-column>
				
					<el-table-column prop="processBatch"  label="加工批号" >
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.processBatch" disabled="disabled"></el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150" align="center">
						<template slot-scope="scope">
							<el-button
								type="text"
								
								@click="handleDelete(scope.$index, scope.row)"
							>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-table
					v-if="this.ruleForm.source == '采购入库'"
					:data="tableData"
					border
					style="margin-top:20px;"
					ref="multipleTable"
					header-cell-class-name="table-header"
				>
					<el-table-column prop="productName"  label="品名">
						<template slot-scope="scope">
							<el-select v-model="scope.row.productName"  value-key="id" filterable placeholder="请选择" style="width: auto;">
							    <el-option
							        v-for="item in basesourcelist"
							        :key="item.id"
							        :label="item.name"
							        :value="item.name"
							    >
							    {{item.name}}
							    </el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="specs"  label="规格">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.specs" >
							    <template slot="append">
									<el-select v-model="scope.row.unit"  value-key="id" @change="getunits(scope.$index, scope.row)" filterable placeholder="请选择" style="width:100px;">
									    <el-option
									        v-for="item in unitslist"
									        :key="item.id"
									        :label="item.name"
									        :value="item.name"
									    >
									    {{item.name}}
									    </el-option>
									</el-select>
								</template>
							  </el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="number"  label="数量">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.number"  @change="addup(scope.$index, scope.row)">
							    <template slot="append">
									{{scope.row.numunits}}
								</template>
							  </el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="subtotal"  label="小计">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容" disabled="disabled"  v-model="scope.row.subtotal" >
							    <template slot="append">
									{{scope.row.numunits1}}
								</template>
							  </el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="manufacturer"  label="生产企业" >
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.manufacturer" >
							   
							  </el-input>
							</div>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="manufacturer"  label="加工批号" v-if="this.ruleForm.source == '加工入库'">
						<template slot-scope="scope">
							<div>
							  <el-input placeholder="请输入内容"  v-model="scope.row.manufacturer" >
							   
							  </el-input>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column label="操作" width="150" align="center">
						<template slot-scope="scope">
							<el-button
								type="text"
								
								@click="handleDelete(scope.$index, scope.row)"
							>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div @click="addManure" class="addManure">添加入库明细</div>
				
			</el-row>
		</div>
		<el-dialog title="请选择" customClass="1000px" :visible.sync="dialogFormVisible">
			<el-table
			    :data="tableData1"
			    border
			    style="margin-top:20px;"
			    ref="multipleTable"
			    header-cell-class-name="table-header"
			>
			    <el-table-column prop="productName" sortable label="品名"></el-table-column>
			    <el-table-column prop="batch" sortable label="批号"></el-table-column>
			    <el-table-column prop="totalNumber" sortable label="规格">
					<template slot-scope="scope">
						{{scope.row.totalNumber}}{{scope.row.units}}
					</template>
				</el-table-column>
			    <el-table-column prop="grade" sortable label="数量">
					<template slot-scope="scope">
						{{scope.row.subNumber}}{{scope.row.units}}
					</template>
				</el-table-column>
			    <el-table-column label="操作" width="150" align="center">
			        <template slot-scope="scope">
			            <el-button
			                type="text"
			                @click="handLeSelect(scope.$index, scope.row)"
			            >选择</el-button>
			        </template>
			    </el-table-column>
			</el-table>
			<el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>
		<el-form-item class="footerFixed" label-width="0px">
		    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
		    <el-button @click="backPage">返回</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {supplier_findByAll,user_findByAll,basesource_findByAll,unit_findByList,storage_save,plot_findByAll,process_findByList,sub_findByList} from "@/request/api"
	export default{
		data(){
			return{
				disabled:true,
				tableData1:[],
				total:0,
				pagesize:10,
				currentPage:1,
				dialogFormVisible:false,
				processhidden:true,
				warehouseName:'',
				
				tableData:[],
				typelist:[
					{name:'溯源入库'},
					{name:'非溯源入库'}
				],
				
				radio:1,
				ruleForm:{
					storageManageDetaileds:[],
					source:'采购入库'
				},
				rules:{},
				supplierlist:[],
				userlist:[],
				basesourcelist:[],
				unitslist:[],
				conlist:[
					{name:'一号仓库'},
					{name:'二号仓库'}
				],
				labelPosition:"right",
				warehouseList:[],
				index:''
			}
		},
		mounted(){
			this.init()
			this.getwawrehouseList()
			// this.getprocessProduct()
			this.uniqueCode()
		},
		methods:{
			uniqueCode(){
				let data = {
					page:this.currentPage,
				}
				sub_findByList(data).then((res)=>{
					this.tableData1 = res.rows
					this.total = res.total
				})
			},
			handleCurrentChange(val){
				this.currentPage = val
				this.uniqueCode()
			},
			// getprocessProduct(){
			// 	let data = {
			// 		page:this.currentPage
			// 	}
			// 	process_findByList(data).then((res)=>{
			// 		this.tableData1 = res.rows
			// 		this.total = res.total
			// 	})
			// },
			handLeSelect(index,row){
				this.tableData[this.index].productName = row.productName
				this.tableData[this.index].unit = row.specUnits
				this.tableData[this.index].specs = row.spec
				this.tableData[this.index].number = row.subNumber
				this.tableData[this.index].subNumber = row.subNumber
				this.tableData[this.index].subtotal = row.spec*row.subNumber
				this.tableData[this.index].processBatch = row.batch
				this.tableData[this.index].processId = row.id
				
				var r = row.specUnits
				var site  =  r.lastIndexOf("\/")
				this.tableData[this.index].numunits = r.substring(site + 1)
				var st = r.substr(r.lastIndexOf('/', r.lastIndexOf('/') - 1) + 1);
				var str = st.lastIndexOf("\/")
				this.tableData[this.index].numunits1 = st.substring(0,str)
				this.dialogFormVisible = false
			},
			save(){
				
			},
			close(){
				this.dialogFormVisible = false
			},
			addproduct(index,row){
				this.dialogFormVisible = true
				this.index = index
			},
			
			
			getwawrehouseList(){
				plot_findByAll({type:3}).then((res)=>{
					this.warehouseList = res.data
				})
			},
			submitrule(){
				// this.ruleForm = JSON.parse(this.ruleForm)
				this.ruleForm.storageManageDetaileds = this.tableData
				// if(this.radio == 1){
				// 	this.ruleForm.source = "采购入库"
				// }else{
				// 	this.ruleForm.source = "加工入库"
				// }
				// let data = JSON.parse(JSON.stringify(this.ruleForm.inTime))
				// this.ruleForm.inTime = new Date(this.ruleForm.inTime)

				// console.log("a:" + Object.prototype.toString.call(this.ruleForm.inTime))
				storage_save(this.ruleForm).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '保存成功',
					    type: 'success'
					});
					this.$router.push({
					    path:'/warehouseManagement'
					})
				})
			},
			backPage(){
				this.$router.go(-1)
			},
			addup(index,row){
				if(this.ruleForm.source == "加工入库"){
					if(row.number>row.subNumber){
						this.$notify({
						    title: '提示',
						    message: '入库数量不能大于分包数量',
						    type: 'info'
						});
					}
				}
				row.subtotal = row.specs*row.number
				
			},
			getunits(index,row){
				var r = row.unit
				var site  =  r.lastIndexOf("\/")
				row.numunits = r.substring(site + 1)
				var st = r.substr(r.lastIndexOf('/', r.lastIndexOf('/') - 1) + 1);
				var str = st.lastIndexOf("\/")
				row.numunits1 = st.substring(0,str)
			},
			init(){
				
				supplier_findByAll("").then((res)=>{
					this.supplierlist = res.data
					// console.log(res.data)
				})
				user_findByAll("").then((res)=>{
					this.userlist = res.data
				})
				basesource_findByAll("").then((res)=>{
				    this.basesourcelist = res.data
				})
				unit_findByList("").then((res)=>{
					this.unitslist = res.data
				})
				
			},
			handletab(ele){
				this.tableData = []
				if(ele == "加工入库"){
					this.processhidden = false
				}else{
					this.processhidden = true
				}
			},
			handleDelete(index,row){
				this.tableData.splice(index,1)
			},
			addManure(){
				this.tableData.push({
					productName:'',
					specs:'',
					number:'',
					subtotal:'',
					manufacturer:''
				})
			},
			changeWare(ele){
				this.ruleForm.warehouseId = ele.id
				this.ruleForm.warehouseName = ele.name
			}
		}
	}
</script>

<style scoped>
	.addManure{
	    border-radius:8px;
	    margin-top:20px;
	    width:100%;
	    height:60px;
	    line-height:60px;
	    text-align: center;
	    font-size:16px;
	    background:#EBF5FF 100%;
	}
</style>
